<template>
	<view>
		<form @submit="handleSubmit">
			<view class="row">
				<input type="text" name="username" id="">
			</view>
			
			<view class="row">
				<textarea name="content" id="">
					
				</textarea>
			</view>
			
			<view class="redios row">
				<radio-group name="gender">
					<radio value="女">女</radio>
					<radio value="男">男</radio>
					<radio value="未知" checked="">未知</radio>
				</radio-group>
			</view>
			
			<view class="row">
				<picker name="qualification" :value="index" :range="qualifications" @change="pickerChange">
					<view>当前学历(点我即可切换)：{{qualifications[index]}}</view>
				</picker>
			</view>
			
			<view class="btns row">
				<button form-type="submit" type="primary">提交</button>
				<button form-type="reset">重置</button>
			</view>
			
			<view class="">
				表单内容：{{formObj}}
			</view>
			
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				qualifications: ['大专', '本科', '研究生'],
				index: 1,
				formObj: undefined
			};
		},
		methods: {
			handleSubmit(e){
				console.log(e)
				e.target.value.qualification = this.qualifications[e.target.value.qualification]
				this.formObj = e.target.value

			},
			pickerChange(e){
				this.index = e.detail.value
			}
		}
	}
</script>

<style lang="scss">
.row {
	padding: 10rpx;
	radio-group {
		display: flex;
		// justify-content: space-around;
	}
	radio {
		padding: 10rpx;
	}
}
input,textarea {
	border: 2rpx solid black;
}
</style>
